<template>
  <div>
    <div class="action">
      <div>
        <Checkbox
          v-if="showBox"
          v-model="checkAll"
          @on-change="handleAll"
          style="margin-right: 20px"
          >全选</Checkbox
        >
        <Button v-if="showBox" type="error" ghost size="small" @click="delData"
          >删除
          <span v-if="delLength">({{ delLength }})</span>
        </Button>
      </div>
      <Button
        type="error"
        :ghost="showBox ? true : false"
        @click="batchManage"
        >{{ showBox ? "取消管理" : "批量管理" }}</Button
      >
    </div>
    <div class="dynamic">
      <div v-for="(item, index) in list" :key="index" class="dynamicItem">
        <Checkbox
          class="checkbox"
          v-model="item.checked"
          v-if="showBox"
          @on-change="handleItem"
        />
        <video controls class="dynamic-video" :src="item.videoUrl"></video>
        <div class="text">{{ item.text }}</div>
        <div class="dynamic-bottom">
          <div class="creatPoeple">
            <img class="headerImg" :src="item.face" alt="" />
            <div class="name">{{ item.createByName }}</div>
          </div>
          <div class="dynamic-bottom-right">
            <div class="dynamic-bottom-right-item">
              <img src="@/assets/communityimg/share.png" alt="" />
              <div>{{ item.shareNum }}</div>
            </div>
            <div class="dynamic-bottom-right-item">
              <img src="@/assets/communityimg/comments.png" alt="" />
              <div>{{ item.commentsNum }}</div>
            </div>
            <div class="dynamic-bottom-right-item">
              <img src="@/assets/communityimg/collect.png" alt="" />
              <div>{{ item.collectNum }}</div>
            </div>
            <div class="dynamic-bottom-right-item">
              <img src="@/assets/communityimg/praise.png" alt="" />
              <div>{{ item.likeNum }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page" v-if="list.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="pageSize"
        show-total
      />
    </div>
  </div>
</template>

<script>
import { selectCollect } from "@/api/myCollection.js";
import { toCollectAll } from "@/api/course.js";
export default {
  data() {
    return {
      pageNumber: 0,
      pageSize: 10,
      total: 0,
      list: [],
      showBox: false, //是否展示多选框
      checkAll: false, //全选
      dynamicSelectIds: null, //动态选择的ids
    };
  },
  created() {
    this.getList();
  },
  methods: {
    currentHandle(e) {
      this.pageNumber = e;
      this.getList();
    },
    getList() {
      selectCollect({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        type: 1002005,
      }).then((res) => {
        if (res.success) {
          this.list = res.result.records;
          this.total = Number(res.result.total);
          this.list.forEach((i) => {
            i.isChecked = false;
          });
        } else {
          this.$Message.error("获取动态失败");
        }
      });
    },
    //全选
    handleAll() {
      if (this.checkAll) {
        this.list.forEach((item) => {
          item.checked = true;
        });

        this.delLength = this.list.length;
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
        this.delLength = 0;
      }
    },
    //列表单个勾选
    handleItem() {
      this.dynamicSelectIds = this.list.filter((item) => {
        if (item.checked) return item;
      });
    },
    //批量管理
    batchManage() {
      this.showBox = !this.showBox;
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.delLength = 0;
      this.checkAll = false;
    },
    delData() {
      if (this.dynamicSelectIds.length == 0) {
        this.$Message.error("请选择需要删除的动态");
        return;
      }
      let ids = this.dynamicSelectIds.map((r) => {
        return r.id;
      });
      toCollectAll({
        typeId: 1002005,
        dataIds: ids.toString(),
      }).then((res) => {
        if (res.success) {
          this.pageNumber = 1;
          this.getList();
        }
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
.action {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.dynamic {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .dynamicItem {
    position: relative;
    width: 18%;
    margin: 10px;
    .checkbox {
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .dynamic-video {
      width: 100%;
      height: 150px;
      border: 1px solid #ccc;
    }
    .text {
      margin: 10px 0;
    }
    .dynamic-bottom {
      display: flex;
      justify-content: space-between;
      .creatPoeple {
        display: flex;
        align-items: center;
        .headerImg {
          width: 24px;
          height: 24px;
        }
        .name {
          font-size: 12px;
          color: #63676e;
        }
      }
      .dynamic-bottom-right {
        display: flex;
        align-items: center;
        .dynamic-bottom-right-item {
          display: flex;
          align-items: center;
          margin: 0 3px;
          img {
            width: 12px;
            height: 12px;
          }
          > div {
            color: #ccc;
          }
        }
      }
    }
  }
  .page {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
}
</style>